<template>
  <div>
    <a-card :bordered="false">
      <a-tabs v-model="activeKey">
        <a-tab-pane key="1">
        <span slot="tab">
         <a-icon type="dot-chart" />
          空调亚健康分析
        </span>
          <air-conditioner v-if="activeKey === '1'" />
        </a-tab-pane>

        <a-tab-pane key="2">
         <span slot="tab">
       <a-icon type="sliders" />
          数据中心亚健康分析
        </span>
          <dc v-if="activeKey === '2'" />
        </a-tab-pane>

        <a-tab-pane key="3">
           <span slot="tab">
      <a-icon type="pie-chart" />
          UPS亚健康分析
        </span>
          <ups v-if="activeKey === '3'" />
        </a-tab-pane>

        <a-tab-pane key="4">
         <span slot="tab">
      <a-icon type="reconciliation" />
        亚健康阈值设置
        </span>
          <thresholds v-if="activeKey === '4'" />
        </a-tab-pane>

        <a-tab-pane key="5">
        <span slot="tab">
			<a-icon type="tool" />
      	 亚健康预警
        </span>
          <warning ref="warning" v-if="activeKey === '5'" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import AirConditioner from './AirConditioner'
import Warning from './Warning'
import Dc from './Dc'
import Ups from './Ups'
import Thresholds from './Thresholds'
export default {
  name: 'F0404',
  components: {
    AirConditioner,
    Warning,
    Dc,
    Ups,
    Thresholds,
  },
  data() {
    return {
      activeKey: '1'
    }
  },
  created() {},
  methods: {
    handleTabChange() {
      let key = this.activeKey;
      if (key === '5' && this.$refs.warning) {
        this.$refs.warning.loadData();
      }
    },
  },
}
</script>